<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.3.1.js"></script>
    <script type="application/javascript">
        //            原生的ajax开发:
        //            1）创建Ajax引擎对象
        //            2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
        //            3）绑定提交地址
        //            4）发送请求
        //            5）接受响应数据
        //
        function  clickFn() {
            //1）创建Ajax引擎对象
            var xmlHttp = new XMLHttpRequest();
            //2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
            xmlHttp.onreadystatechange = function (ev) {
                //如果state值是4，说明收到响应数据
                //如果状态码是200.说明服务器正常响应
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                    // 5）接受响应数据
                    //获取响应数据
                    alert(xmlHttp.responseText); //response.getWriter().write("hello")
                }
            }
            //3）绑定提交地址
            //参1：表示请求方式
            // 参2：表示服务器的资源访问路径，不用加项目名,
            // 参3：表示是否异步，true是异步

            xmlHttp.open("get","s1",true);
            //4)发送请求
            xmlHttp.send();
        }

    </script>
</head>
<body>

<!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
<input type="button" value="点我，发出异步请求" onclick="clickFn()"/>
</body>
</html>